<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 我的日志 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button class="mr10" type="primary" @click="addclick">新增</el-button>
        <el-date-picker class="mr10" v-model="startTime_endTime" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"></el-date-picker>
        <el-select v-model="query.fromType" placeholder="选择部门" class="mr10">
          <el-option label="全部部门" value="">
          </el-option>
        </el-select>
        <el-input v-model="query.kw" placeholder="请输入姓名查询" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData" border class="table" style="width: 100%" ref="multipleTable">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="cName" label="姓名" width="120">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false">
              <el-tag v-if="scope.row.extParam2 == 1" size="mini" type="warning" :style="{'marginRight':'5px'}">重复</el-tag>{{scope.row.cName}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="cPhone" label="录入日期" width="120"></el-table-column>
        <el-table-column prop="cPhone" label="昨日预计上门" width="120"></el-table-column>
        <el-table-column prop="cPhone" label="今日实际上门" width="120"></el-table-column>
        <el-table-column prop="cPhone" label="明日预计上门" width="120"></el-table-column>
        <el-table-column prop="cPhone" label="今日通话时长" width="120"></el-table-column>
        <el-table-column prop="cPhone" label="今日通话次数" width="120"></el-table-column>
        <el-table-column prop="cPhone" label="今日微信添加数" width="120"></el-table-column>
        <el-table-column prop="cPhone" label="备注说明" width="120"></el-table-column>
        <el-table-column label="点评状态" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-tag type="primary">未点评</el-tag>
            <el-tag type="success">已点评</el-tag>
            <el-popover placement="top-start" title="点评详情" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
              <el-link slot="reference" style="margin-left:10px;">查看</el-link>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-tag type="primary">正常</el-tag>
            <el-tag type="danger">补写</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="removeList(scope.row.cId)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="totalCount"
                       :pager-count="5" @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="新增日志" :visible.sync="addflg" width="30%">
      <el-form :model="rzform" :rules="rzformrules" ref="rzformruleForm" label-width="130px" class="demo-ruleForm">
        <el-form-item label="日志状态" prop="status">
          <el-radio-group v-model="rzform.status">
            <el-radio label="0">当天</el-radio>
            <el-radio label="1">昨天</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="昨日预计上门" prop="yesterdayYJshang">
          <el-input v-model="rzform.yesterdayYJshang" readonly>
            <template slot="append">个</template>
          </el-input>
        </el-form-item>
        <el-form-item label="今日实际上门" prop="daySJshang">
          <el-input v-model="rzform.daySJshang">
            <template slot="append">个</template>
          </el-input>
        </el-form-item>
        <el-form-item label="明日预计上门" prop="tomorrowYJshang">
          <el-input v-model="rzform.tomorrowYJshang">
            <template slot="append">个</template>
          </el-input>
        </el-form-item>
        <el-form-item label="今日通话时长" prop="dayTime">
          <el-input v-model="rzform.dayTime">
            <template slot="append">分钟</template>
          </el-input>
        </el-form-item>
        <el-form-item label="今日通话次数" prop="dayci">
          <el-input v-model="rzform.dayci">
            <template slot="append">次</template>
          </el-input>
        </el-form-item>
        <el-form-item label="今日微信添加数" prop="dayWXNum">
          <el-input v-model="rzform.dayWXNum">
            <template slot="append">个</template>
          </el-input>
        </el-form-item>
        <el-form-item label="备注说明" prop="remarks">
          <el-input type="textarea" v-model="rzform.remarks" :rows="2">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addflg = false">取 消</el-button>
        <el-button type="primary" :loading="rzform.load" @click="addSubClick('rzformruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { CustomerListsTableAjax, getAscription } from '../../../api/index';

export default {
  data() {
    return {
      loading: true,
      startTime_endTime: [],
      query: {
        page: 1,
        limit: 10,
        startTime: "",
        endTime: "",
        kw: '',
        fromType: '',
        fromSeasId: '',
        isRepeat: '',
      },
      totalCount: 0,
      totalPage: 0,
      ascriptionArr: [],

      tableData: [],
      //新增
      addflg: false,
      rzform: {
        load: false,
        status: '0',
        yesterdayYJshang: 0,
        daySJshang: 0,
        tomorrowYJshang: 0,
        dayTime: 0,
        dayci: 0,
        dayWXNum: 0,
        remarks: '',
      },
      rzformrules: {
        status: [
          { required: true, message: '请输入日志状态', trigger: 'change' }
        ],
        yesterdayYJshang: [
          { required: true, message: '请输入昨天预计上门', trigger: 'blur' }
        ],
        daySJshang: [
          { required: true, message: '请输入今日实际上门', trigger: 'blur' }
        ],
        tomorrowYJshang: [
          { required: true, message: '请输入明日预计上门', trigger: 'blur' }
        ],
        dayTime: [
          { required: true, message: '请输入今日通话时长', trigger: 'blur' }
        ],
        dayci: [
          { required: true, message: '请输入今日通话次数', trigger: 'blur' }
        ],
        dayWXNum: [
          { required: true, message: '请输入今日微信添加数', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '请输入备注说明', trigger: 'blur' }
        ],
      },

    };
  },

  created() {
    this.getData();
  },
  watch: {
    "$route": "getData"
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.loading = true;
      CustomerListsTableAjax(this.query).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.tableData = res.recordList;
          this.totalCount = res.totalCount;
          this.totalPage = res.totalPage;
        } else {
          this.$message(res.msg);
        }
      });
      getAscription().then((res) => {
        if (res.code == 0) {
          this.ascriptionArr = res.cityList;
        } else {
          this.$message(res.msg);
        }
      });
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1
    },
    // 分页切换
    handlePageChange(val) {
      this.loading = true;
      this.$set(this.query, 'page', val);
      this.getData();
    },
    //搜索
    handleSearch() {
      this.query.page = 1;
      if (this.startTime_endTime) {
        this.query.startTime = this.startTime_endTime[0];
        this.query.endTime = this.startTime_endTime[1];
      } else {
        this.query.startTime = "";
        this.query.endTime = "";
      }
      this.getData();
    },
    //新增
    addclick() {
      this.addflg = true;
    },
    //新增提交
    addSubClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

        }
      })
    }

  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.handle-select {
    width: 120px;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.mr10 {
    margin-right: 10px;
}
/deep/ :focus {
    outline: 0;
}
</style>
